import React, { Component } from 'react'
import Header from '../common/Header'
import TabBar from '../common/TabBar'
import { connect } from 'react-redux';
import { cancel_collect_action, check_action, allcheck_action } from '../../store/store';
class Collect extends Component {
    render() {
        return (
            <div className="collect-page">
                <Header title="收藏页"></Header>
                {/* 列表 */}
                <div className="list">
                    {
                        this.props.list.length > 0 ?
                        this.props.list.map((item, index) => {
                            return (
                                <div className="item" key={item.id}>
                                    <div className="check">
                                        <input type="checkbox" checked={item.checked} onChange={()=>{ this.props.check( item.id ) }}/>
                                    </div>
                                    <div className="pic">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="text">
                                        <div>{item.name}</div>
                                        <div>¥{item.price}</div>
                                        <div>{item.phone}</div>
                                    </div>
                                    <div className="btn cancel" onClick={() => { this.props.cancel_collect(item.id) }}>取消收藏</div> 
                                    
                                </div>
                            )
                        }) :
                            <div className="empty">这个人有点懒,还没有收藏任何商品!</div>
                    }
                </div>
                <div className="summary">
                    <input type="checkbox" checked={this.props.allchecked} onChange={()=>{ this.props.ac() }}/> 全选  共选中0件商品
                </div>
                <TabBar></TabBar>
            </div>
        )
    }
}

//注入收藏列表数据
//注入的数据/方法 最终放置在组件的props上
export default connect(
    (state) => {//注入数据
        return {
            list: state.collectList,
            allchecked: state.allchecked
        }
    },
    (dispatch) => {//注入方法
        return {
            cancel_collect: (id) => {
                dispatch(cancel_collect_action(id));
            },
            check: (id) => {
                dispatch( check_action(id) )
            },
            ac: () => {
                dispatch(allcheck_action());
            }
        }
    }
)( Collect )